<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../../../assets/js/vue-2.5.6.js"></script>
    <title>Vue.set 全局操作</title>
</head>

<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>

    </div>
    <button onclick="add()">外部添加</button>

    <script type="text/javascript">
        var outData = {
            arr: ['aaa', 'bbb', 'ccc']
        };
        var app = new Vue({
            el: '#app',
            data: outData
        });

        function add() {
            console.log("我已经执行了");
            Vue.set(app.arr, 1, 'ddd');
            // app.arr[1] = 'ddd';
            //这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。
        }
    </script>
</body>

</html>